<template>
  <a-modal title="反馈详情" :visible="visible" :destroy-on-close="true" @ok="handleOk" @cancel="handleCancel">
    <a-row class="title">
      <strong>{{ options["姓名"] }}</strong>
    </a-row>
    <a-row class="title">
      <a-col :span="4">
        <span class="sub_tit">身份证号</span>
      </a-col>
      <a-col :span="20">
        <span class="sub_tit">{{ options["身份证号"] }}</span>
      </a-col>
    </a-row>
    <a-divider v-if="history.length !== 0" style="margin-top:8px;margin-bottom:6px;" />
    <div v-if="history.lenght !== 0" :class="[history.length <= 2 ? '' : heightClass]">
      <div v-for="(item, i) in history" :key="i">
        <a-row class="title">
          <a-col :span="4">
            <span class="sub_tit">反馈人</span>
          </a-col>
          <a-col :span="20">
            <span class="sub_tit">{{ item.createUserName }}</span>
          </a-col>
        </a-row>
        <a-row class="title">
          <a-col :span="4">
            <span class="sub_tit">反馈状态</span>
          </a-col>
          <a-col :span="20">
            <span class="sub_tit">{{ ["未完成", "已完成", "异常"][item.state] }}</span>
          </a-col>
        </a-row>
        <a-row class="title">
          <a-col :span="4">
            <span class="sub_tit">反馈时间</span>
          </a-col>
          <a-col :span="20">
            <span class="sub_tit">{{ moment(item.gmtCreate).format("YYYY-MM-DD HH:MM") }}</span>
          </a-col>
        </a-row>
        <a-row class="title">
          <a-col :span="4">
            <span class="sub_tit">反馈内容</span>
          </a-col>
          <a-col :span="20">
            <span class="sub_tit">{{ item.feedbackContent }}</span>
          </a-col>
        </a-row>
        <a-divider v-if="i !== history.length - 1" style="margin-top:8px;margin-bottom:6px;" />
      </div>
    </div>
    <a-divider v-if="history.length !== 0" style="margin-top:8px;margin-bottom:6px;" />
    <a-row class="title">
      <a-col :span="4">
        <span class="sub_tit">状态</span>
      </a-col>
      <a-col :span="20">
        <a-radio-group :default-value="options.status" @change="handleChange">
          <a-radio :value="1">完成</a-radio>
          <a-radio :value="2">异常</a-radio>
        </a-radio-group>
      </a-col>
    </a-row>

    <a-row class="title mg_t12 content">
      <a-textarea v-model="options.remake" placeholder="反馈内容" />
    </a-row>
    <a-row style="margin-top:10px;" class="primary">可重复提交反馈，但会以最后提交的反馈为准!</a-row>
  </a-modal>
</template>
<script>
import { mapState } from "vuex";
import moment from "moment";
export default {
  name: "FeedBack",
  props: ["options", "visible"],
  data() {
    return {
      copy: {},
      history: [],
      heightClass: "heightclass"
    };
  },
  mounted() {
    this.$nextTick(function() {
      this.$on("getHistory", function(id) {
        this.$request({
          url: `hr/api/v1/missionItemFeedbacks/selectFeedbackByItemId/` + id,
          method: "GET"
        }).then(({ data }) => {
          if (data) {
            this.history = data;
            console.log(this.history);
          }
        });
      });
    });
  },
  computed: {
    ...mapState(["admin"]),
    footer() {
      return this.admin.activeCompany && this.admin.activeCompany.includes("总");
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.copy = JSON.parse(JSON.stringify(this.options));
      }
    }
  },
  methods: {
    handleChange(e) {
      this.options.status = e.target.value;
    },
    handleOk() {
      if (this.options.status === 0) {
        this.$message.success("请选择状态");
        return;
      }
      if (this.options.status === 2 && (!this.options.remake || this.options.remake.replace(/^\s*|\s*$/g, "").length === 0)) {
        // 异常状态，内容为必填
        this.$message.success("请填写反馈内容");
        return;
      }
      this.$emit("change", {
        visible: false,
        success: true,
        options: this.options
      });
    },
    handleCancel() {
      this.$emit("change", {
        visible: false,
        success: false,
        options: this.copy
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.heightclass {
  height: 300px;
  overflow-y: auto;
}
.title {
  line-height: 32px;
}
.content {
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
}
</style>
